<template>
	<view class='form'>
		<uni-forms ref="form" :rules="rules" :modelValue="formData">
			<uni-forms-item label="账号" name="username">
				<uni-easyinput v-model="formData.username" type="text" placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="姓名" name="nickname">
				<uni-easyinput v-model="formData.nickname" type="text" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="单位" name="company">
				<uni-easyinput v-model="formData.company" disabled type="text" placeholder="请输入单位" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" name="tel">
				<uni-easyinput v-model="formData.tel" type="number" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="部门" name="deptoptions">
				<picker :range='deptoptions' @change='deptpicker' :value="index">
					<view class='dept'>{{deptoptions[index]}}</view>
				</picker>
			</uni-forms-item>
			<!-- <uni-forms-item label="模块" name="modules">
				<picker :range='modules' @change='modulesFn' :value="mindex">
					<view class='dept'>{{modules[mindex]}}</view>
				</picker>
			</uni-forms-item> -->
			<!-- <uni-forms-item label="角色" name="comment">
				<picker :range='comment' @change='commentFn' :value="cindex">
					<view class='dept'>{{comment[cindex]}}</view>
				</picker>
			</uni-forms-item> -->
			<uni-forms-item label="模块角色" name="comment">
				 <uni-data-picker :localdata="items" popup-title="请选择模块和角色" @change="modFn" @nodeclick="onnodeclick"></uni-data-picker>
			</uni-forms-item>
		</uni-forms>
		<view style="margin: 16px">
			<van-button round block type="info" @click="submit"> 确定 </van-button>
		</view>
	</view>
</template>
<script>
	import {
		getFields,
		regist
	} from '@/api/register/index.js'
	import CryptoJS from "crypto-js";
	export default {
		data() {
			return {
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账号'
							},
							{
								pattern: /^[a-zA-Z][a-zA-Z_]*$/,
								errorMessage: '请输入账号,只能包含字母、下划线,必须字母开头',
							}
						],
						validateTrigger:'submit'

					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								pattern: /^[a-zA-Z0-9]{6,}$/,
								errorMessage: '请填写密码,长度最少为6位',
							},
						]
					},
					nickname:{
						rules:[
							{
								required: true,
								errorMessage: '请输入姓名'
							}
						]
					},
					tel:{
						rules:[{
							required:true,
							errorMessage: '请输入手机号',
						},
						{
						pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						errorMessage: '请输入正确格式的手机号',
						}
						],
					},
					comment:{
						rules:[{
							required:true,
							errorMessage: '请选择模块及角色'
						}]
					}
				},
				formData: {
					username: "", //账号
					password: "", //密码
					nickname: "", //姓名
					company: "北京武警总队", //单位
					tel: "", //手机号
					deptname_id: "1", //部门ID
					auths: ['2'], //模块
					commentRole: "", //角色
					mediaRole:'',//融媒体角色的ID
					status: 0, //是否能登录武警后台
				},

				deptoptions: [],
				index: 0,
				// comment: [],
				// cindex: 0,
				// mindex: 0,
				// modules: [],
				 items: []//模块角色
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res=>{
					uni.showLoading({
					title: '提交中'
				});
				this.regist()
				
				                console.log('表单数据信息：', res);
				            }).catch(err =>{
				                console.log('表单错误信息：', err);
				            })
				
			},
			deptpicker({
				detail
			}) {
				console.log(detail)
				this.index=detail.value
				this.formData.deptname_id = detail.value + 1
			},
			// modulesFn({
			// 	detail
			// }) {
			// 	this.mindex=detail.value
			// 	let obj ={}
			// 	detail.value===0?obj[detail.value]='2':obj[detail.value]='5'
			// 	if(this.formData.auths.indexOf(obj[detail.value])===-1) this.formData.auths.splice(0,1,obj[detail.value])
			// 	// this.formData.auths=obj[detail.value]
			// 	// this.formData.auths = detail.value === 0 ? '2' : '5'
			// 	console.log(obj[detail.value], 'modules')
			// },
			// commentFn({
			// 	detail
			// }) {
			// 	this.cindex=detail.value
			// 	this.formData.commentRole = detail.value === 0 ? 'push' : 'execute'
			// },
			modFn(e) {
				let {parent_value,text,value}=e.detail.value[1]
				//模块
				if(this.formData.auths.indexOf(parent_value)===-1) this.formData.auths.splice(0,1,parent_value)
				//角色
				if(typeof value==typeof text){
					this.formData.commentRole=value
					this.formData.mediaRole=''
				}else{
					this.formData.mediaRole=value
					this.formData.commentRole=''
				}
				// typeof value==typeof text?this.formData.commentRole=value:this.formData.mediaRole=value
				console.log('e', e.detail.value)
			},
			regist(){
				const time = Math.round(new Date().getTime() / 1000);
				let user_time = `time=${time}&username=${this.formData.username}vkdHfC9MXrrfSSGiJ4cknmKKvzCKEz2Q`;
				let sign = CryptoJS.SHA256(user_time).toString().toUpperCase();
				regist({
					time,
					sign,
					...this.formData
				}).then((re) => {
					if (re.code === 10000) {
						uni.navigateTo({
							url: '../login/login'
						})
						setTimeout(() => {
							uni.showToast({
								title: '成功，等待审核'
							})
							uni.hideLoading()
						}, 1000)
					}
					setTimeout(() => {
						uni.showToast({
							title: re.msg
						})
						uni.hideLoading()
					}, 1000)
					console.log(re, 'regist')
				})
			},
			onnodeclick() {},
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
			getFields().then((re) => {
				for (let key in re.data.department) {
					this.deptoptions.push(re.data.department[key])
				}
				// for (let key in re.data.commentRole) {
				// 	this.comment.push(re.data.commentRole[key])
				// }
				// for (let key in re.data.modules) {
				// 	this.modules.push(re.data.modules[key])
				// }
				this.items=re.data.modules
			})
		}
	}
</script>
<style scoped>
	.form {
		padding: 10px;
	}

	.dept {
		border: 1px solid #c8c7cc;
		border-radius: 4px;
		height: 36px;
		line-height: 36px;
		padding-left: 10px;
	}
</style>
